<template>
    <div v-loading="loading"
        class="edu-page-warp">
        <el-card shadow="never"
                body-style="padding: 24px 24px 6px 24px;">
        <!-- <el-form :model="queryForm" label-width="80px" class="boderBottom">
            <el-row :gutter="24" style="height: 50px;">
                <el-col :span="4">
                    <div class="title-one">筛选条件</div>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="进阶层次:" prop="advancedLevel" class="no-bottom">
                        <el-select
                            clearable
                            v-model="queryForm.advancedLevel"
                            style="width:100%"
                            @change="queryMinorMajorCondition"
                            placeholder="请选择"
                        >
                            <el-option
                                v-for="item in options.advancedLevel"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <div style="float:right;">
                        <el-button size="mini" @click="resetSearch">重置</el-button>
                        <el-button size="mini" type="primary" @click="initPage">筛选</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-form> -->
        <div v-if="!isTableExsit"
            style=" height: 500px;">
            <h1 style="text-align: center; font-size: 18px;
                font-family: '微软雅黑';
                padding-top: 30px;
                color: #ccc;">成绩列表暂无成绩</h1>
        </div>
        <div v-else>
            <div style="width:100%; margin: 20px 0 40px 0;"></div>
            <span>总平均绩点：{{ studentScoreInfo.totalAvgGradePoint }}</span>
            <span class="spanStyle">实修学分：{{ studentScoreInfo.creditPassed }}</span>
            <span class="spanStyle">不及格学分：{{ studentScoreInfo.failingCredits }}</span>
            <span class="spanStyle">不及格门数：{{ studentScoreInfo.failingCourseCount }}</span>
            <div v-for="(item, i) in tableList" style="margin-top: 10px;" :key="i">
                <div style="text-align: center; font-weight: bold;border: 2px solid #ccc; border-bottom: none; height: 32px; font-size: 14px; line-height: 32px; width: 99.9%;">
                    {{ item.calendarYearTermCn }}</div>
                <el-table
                    :data="item.scoreDetailInfoList"
                    border
                    style="border-left: 2px solid #ccc; border-right: 2px solid #ccc;"
                    stripe
                    :header-cell-style="{background: '#f5f7f9'}"
                    highlight-current-row>
                    <el-table-column
                        label="序号"
                        type="index"
                        width="60"
                        align="center" />
                    <el-table-column
                        label="课程代码"
                        prop="courseCode"
                        show-overflow-tooltip="true"
                        align="center" />
                    <el-table-column
                        :label="$t('score.failScoreManage.courseName')"
                        prop="courseName"
                        show-overflow-tooltip="true"
                        align="center" />
                    <el-table-column
                        label="课程类别"
                        prop="courseLabel"
                        show-overflow-tooltip="true"
                        align="center" >
                        <!-- <template slot-scope="scope">{{ scope.row.courseTypeI18n ? scope.row.courseTypeI18n : scope.row.courseLabel }}</template> -->
                    </el-table-column>
                    <el-table-column
                        label="成绩性质"
                        prop="scoreExamTypeI18n"
                        show-overflow-tooltip="true"
                        align="center" />
                    <el-table-column
                        label="学分"
                        prop="credit"
                        show-overflow-tooltip="true"
                        align="center" />
                    <el-table-column
                        label="绩点"
                        prop="gradePoint"
                        show-overflow-tooltip="true"
                        align="center" />
                    <el-table-column
                        label="成绩"
                        prop="scoreValue"
                        show-overflow-tooltip="true"
                        align="center" />
                    <el-table-column
                        label="是否通过"
                        prop="isPass"
                        show-overflow-tooltip="true"
                        align="center">
                        <template slot-scope="scope">{{ scope.row.isPass == 1 ? '是' : '否' }}</template>
                    </el-table-column>
                    <el-table-column
                        label="更新时间"
                        prop="importUpdateTime"
                        show-overflow-tooltip="true"
                        align="center" />
                </el-table>
                <div style="text-align: left; border: 2px solid #ccc; border-top: none; height: 32px; font-size: 14px; line-height: 32px; width: 99.9%; padding-left: 20px;">
                    本学期平均绩点：{{ item.averagePoint }}</div>
            </div>
        </div>
        </el-card>
    </div>
</template>
<script>
import { queryDic } from 'common/src/api/dictionary';
import { queryAdvancedLevel } from "common/src/api/minor/collegemajor";
import scoreManagementApi from 'common/src/api/scoreManagement/scoreManagement';
import UTILS from 'common/src/utils/utils';
export default {
    name: 'my-score-manage',
    data() {
        return {
            tableList: [],
            isTableExsit: false,
            user: '',
            studentScoreInfo: {
                totalAvgGradePoint: '',
                creditPassed: '',
                failingCredits: '',
                failingCourseCount: ''
            },
            courseTypeList: [],
            queryForm: {
                advancedLevel: "微专业",
            },
            options: {
                advancedLevel: []
            }
        };
    },
    mounted() {
        let sessiondata = JSON.parse(localStorage.getItem('sessiondata'));
        if(sessiondata.mockUser) {
            this.user = sessiondata.mockUser.uid;
        }else{
            this.user = sessiondata.user.uid;
        }
        this.initPage();
        // this.initAdvancedLevel("0");
    },
    methods: {
        // 进阶层次
        initAdvancedLevel(isOnCampus) {
            let params = {
                isOnCampus: isOnCampus ? isOnCampus : "0"
            };
            this.options["advancedLevel"] = [];
            queryAdvancedLevel(params).then(res => {
                if (res.code == 200) {
                    for (let key = 0; key < res.data.length; key++) {
                        this.options["advancedLevel"].push({
                            value: res.data[key].advancedLevelCode,
                            label: res.data[key].advancedLevelName
                        });
                    }
                }
            });
        },
        // 默认进入页面时查看页面信息
        initPage() {
            let param = {
                studentId: this.user,
                // advancedLevelCode: this.queryForm.advancedLevel === '微专业' ? '10002' : this.queryForm.advancedLevel
                advancedLevelCode: ''
            };
            let that = this;
            scoreManagementApi.getListPage(param).then(res => {
                if(res.code === 200 && res.data != null) {
                    for(let key in that.studentScoreInfo) {
                        that.studentScoreInfo[key] = res.data[key] ? res.data[key] : 0;
                    }
                    that.tableList = res.data.scoreDetailList;
                    that.isTableExsit = true;
                } else{
                    that.isTableExsit = false;
                }
            });
        },
        // 重置
        resetSearch () {
            this.queryForm.advancedLevel = '微专业',
            this.initPage()
        }
    }
};
</script>
<style lang="scss" scoped>
.tableMarginTop {
    clear: both;
    position: relative;
    top: 20px;
}
.spanStyle{
  padding-left: 20px;
}
.title-one {
    font-size: 18px;
    font-family: "微软雅黑";
    color: #2b3b4e;
    line-height: 30px;
}
.boderBottom {
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
}
</style>

